<template>
	<view class="content">
		<!-- <view class="tips">
			<text class="remark">重要提示</text>: 尊敬的客户，为了维护您的权益，请在签署本授权书前，仔细阅读本授权书各条款(特别是黑体字条款)，关注您在授权书中的权利、义务。如有任何疑问，请向经办行咨询。
		</view> -->
		<!-- 步骤条 -->
		<!-- <StepBar :currentStep="currentStep"></StepBar> -->
		<view class="steps">
			<TnSteps v-model="currentStep" mode="dotIcon" active-color="#EA4E34" disabled>
				<TnStepsItem v-for="(item, index) in stepsData" :color="item.color" :key="index" active-color="#EA4E34"
					:title="item.title" :activeIcon="item.activeIcon" />
			</TnSteps>
		</view>
		<view class="main">
			<view class="title">《个人信息查询及使用授权书》</view>
			<view class="info">
					<view>武汉农村商业银行股份有限公司 （下称“武农商”或“贵行”）：</view>
					<view class="txt">
					  本人／我司不可撤销地授权责行在向本人／我司提供金融产品和金融服务以及与贵行开展其他业务过程中，有权查询、使用、保留本人全部或部分信息，具体约定如下：
					</view>
					<view class="txt">
					  一、本人／我司同意并授权贵行在办理以下叁项涉及到本人／我司的业务时，可以向政府主管部门批准设立的政务大数据平台（包括但不限于税务、工商、法院、公安、社保、公积金、不动产、通信和其他各类政务数据）和依法成立的电子商务平台、互联网平台、信息科技公司、金融科技公司等第三方机构建立的信息数据库查询本人／我司的信息，并有权对查询到的本人／司信息进行打印、保存和使用
					</view>
					<view >
					  （壹）本人／我司向贵行申请、办理授信和贷款业务，用于授信和贷款前调查、授信和贷款审批、放款、授信和贷款后管理等用途的。
					</view>
					<view>
					  （贰）审核本人／我司承接担保业务（如有），用于提供担保的审核与货后管理等用途的
					</view>
					<view class="txt">
					  二、本人／我司同意并授权贵行向政府主管部门批准设立的政务大数据平台（包括但不限于税务、工商、法院、公安、社保、公积金、不动产、通信和其他各类政务数据）和依法成立的电子商务平台、互联网平台等第三方机构作为数据服务支撑方的原因提供本人／我司的信息，以及出于为本人／我司提供综合化服务的目的视情况向武汉农村商业银行、武农商的服务机构、代理人、外包作业机构、联名卡合作方以及其他武农商认为必要的业务合作机构提供本人／我司的信息。贵行承诺将要改接，武次商披露资料的机构对本人／我司的信息承担保密义务。
					</view>
					<view class="txt">
					  三、本人通过国家税务主管部门的税务政务平台授权查询本人担任法定代表人（负责人）的法人、非法人组织等组织机构的税务信息、纳税申报信息。
					</view>
			</view>
		</view>
		<view class="line">
		</view>
		<view class="sign-box">
		  <view class="sign-box-left">
			<view class="txt">单位名称：</view>
			<view class="txt">单位公章：</view>
			<view class="txt">单位法定代表人或委托人：</view>
			<view class="txt">签发日期：</view>
		  </view>
		  <view class="sign-box-right" @click="handleClick" v-if="!isStamp" >
			<view class="icon">
				<image mode="widthFix" class="img"  src="@/static/qz2.png"></image>
				
			</view>
			<view class="text">点击盖章</view>
		  </view>
		  <view class="sign-box-img" v-else>
			  <image mode="widthFix" class="img"  src="@/static/dzqz.png"></image>
		  </view>
		</view>
		<view class="footer">
			<footerbtn 
			:rightName='rightName' 
			:leftName="leftName"
			@rightClick='rightClick'
			@leftClick='leftClick'
			></footerbtn>
		</view>
		
		<!-- 信息弹框 -->
		<view class="modal">
		    <up-popup closeable mode="center"
			:safeAreaInsetBottom="true" @close="onClose"
			 round
			 custom-style="width:650rpx;height:700rpx;margin-bottom:30rpx;border-radius: 30rpx;z-index:1000000000"
			  :show="showModal">
				<view class="modal-title">
					个人用章
				</view>
				<view class="modal-infos">
					<view class="modal-infos-left">
						同时覆盖所有签署区：
					</view>
					<view class="modal-infos-right">
						<up-switch
							space="2" v-model="value1" activeColor="#EA5034" 
							inactiveColor="rgb(230, 230, 230)">
						</up-switch>
					</view>
				</view>
				<view class="modal-block">
					<text class="modal-block-line"></text>
					<text class="modal-block-txt">个人用章</text>
				</view>
				<view class="modal-content">
					<view class="modal-box">
						<image mode="widthFix" class="modal-box-img" src="@/static/dzqz.png"></image>
					</view>
					
				</view>
				<view class="modal-footer">
					<view class="footer-btn" @click="cancel">
						取消
					</view>
					<view class="footer-btn" @click="handleSubmit">
						提交
					</view>
				</view>
		    </up-popup>
		</view>
		<view class="modal">
		    <up-popup closeable mode="center"
			:safeAreaInsetBottom="true" @close="onClose2"
			 round
			 custom-style="width:650rpx;height:700rpx;margin-bottom:30rpx;border-radius: 30rpx;z-index:1000000000"
			  :show="showModal2">
				<view class="modal-title">
					短信认证
				</view>
				<view class="modal-infos">
					<view class="modal-infos-left">
						认证方式：短信认证
					</view>
					<!-- <view class="modal-infos-right">
						<up-switch
							space="2" v-model="value1" activeColor="#EA5034" 
							inactiveColor="rgb(230, 230, 230)">
						</up-switch>
					</view> -->
				</view>
				<view class="modal-block">
					<text class="modal-block-line"></text>
					<text class="modal-block-txt">个人用章</text>
				</view>
				<view class="modal-content">
					<view class="modal-box">
						<text class="modal-phone">移动电话：</text>
						<up-input
						    placeholder="请输入移动电话"
						    border="surround"
						    v-model="phone"
							maxlength="11"
							type="number"
							class="modal-input"
							disabled
						  ></up-input>
					</view>
					<view class="modal-box">
						<text class="modal-phone">短信验证码：</text>
						<up-input
						    placeholder="请输入验证码"
						    border="surround"
						    v-model="code"
							class="modal-input"
							maxlength="6"
							type="number"
						  ></up-input>
						  <text class="modal-txt" v-if="isTime" @click="handleMessage">{{message}}</text>
						  <text class="modal-txt" v-else="!isTime">{{message}}</text>
					</view>
				</view>
				<view class="modal-footer">
					<view class="footer-btn" @click="cancel2">
						取消
					</view>
					<view class="footer-btn" @click="handleSubmit2">
						提交
					</view>
				</view>
		    </up-popup>
		</view>
			
	
	</view>
</template>

<script>
	import TnSteps from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps.vue'
	import TnStepsItem from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps-item.vue'
	import footerbtn from '@/components/footerbtn/footerbtn.vue'
	import StepBar from '@/components/stepBar/stepBar.vue'
	export default {
		components:{
			footerbtn,
			StepBar,
			TnSteps,
			TnStepsItem,
		},
		data() {
			return {
				title: '授权页面',
				idcard:475155199212054152,
				aloneChecked:true,
				leftName:'上一步',
				rightName:'提交',
				showModal:false,
				showModal2:false,
				title:'短信验证',
				phone:'',
				code:'',
				isStamp:false,
				messageShow:true,
				value1:true,
				currentStep:2,
				stepsData: [{
						title: '贷款信息',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: '授权页面',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: 'e签宝授权',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: '信息确认',
						color: '#999999',
						activeIcon: 'circle-fill'
					}
				],
				message:'发送短信',
				timer:null,
				isTime:true,
			}
		},
		onLoad() {
			this.info = uni.getStorageSync('formData')?JSON.parse(uni.getStorageSync('formData')):{}
			this.phone = this.info.housePhone
		},
		methods: {
			rightClick(){
				this.showModal2 = true;
			},
			leftClick(){
				// uni.navigateTo({
				// 	url:'/packageA/pages/empower'
				// })
				uni.navigateBack({
					delta: 1
				})
			},
			cancel(){
				this.showModal = false;
			},
			cancel2(){
				this.showModal2 = false;
				setTimeout(()=>{
					this.phone = '';
					this.code = '';
					this.message == '发送短信'
				},100)
			},
			onClose(){
				this.cancel()
			},
			onClose2(){
				this.showModal2 = false;
			},
			goNav(){
				uni.navigateTo({
					url:'/packageA/pages/apply'
				})
			},
			handleClick(){
				this.showModal = true;
			},
			handleSubmit(){
				this.isStamp = true;
				this.cancel()
			},
			handleSubmit2(){
				if(!this.validPhone()){
					return
				}
				if(this.code == ''){
					uni.showToast({
						title:'请输入短信验证码',
						icon:'none'
					})
					return; 
				}
				uni.navigateTo({
					url:'/packageA/pages/confirmInfo'
				})
				this.clearTimer()
				setTimeout(()=>{
					this.message == '发送短信'
				},50)
			},
			validPhone(){
				let flag = true
				const regPhone = /^1[3456789]\d{9}$/;
				if(this.phone == ''){
					uni.showToast({
						title:'请输入移动电话',
						icon: 'none'
					})
					flag = false
					return;
				}
				if (!regPhone.test(this.phone)) {
					flag = false
					uni.showToast({
						title:'手机号格式不正确',
						icon: 'none'
					})
					return;
				}
				return flag
			},
			handleMessage(){
				if(!this.validPhone()){
					return
				}
				if(this.message == '发送短信' || this.message == '重新发送'){
					var time = 60;
					let random = Math.ceil(Math.random()*100)
					let randomLen = Math.ceil(Math.random()*1000000)
					this.isTime = false;
					console.log('random',Math.random())
					console.log('randomLen',randomLen)
					this.code = ''
					this.timer = setInterval(()=>{
						time-=1;
						this.message = time+'s'
						if(time == 0){
							this.clearTimer(this.timer)
						}
						// if(time <= 50){
						// 	this.code = randomLen;
						// 	this.clearTimer(this.timer)
						// }
					},1000)
				}
			},
			clearTimer(){
				clearInterval(this.timer);
				this.message = '重新发送';
				this.isTime = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		/* padding:20rpx; */
		padding-bottom: 130rpx;
	}
	.tips{
		font-size:24rpx;
		border-bottom:1px solid #ccc;
		padding: 20rpx;
		color:#666;
	}
	.remark{
		font-weight:800;
		color:#000;
	}
	.main{
		padding: 20rpx;
	}
	.title{
		font-size:30rpx;
		font-weight: 900;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.info{
		color:#666;
	}
	.txt{
		font-size:26rpx;
		text-indent: 2em;
	}
	.line{
		width:100%;
		height:20rpx;
		background:#f1f1f1;
	}
	
	.signature{
		display: flex;
		align-items: center;
		justify-content: center;
		padding:20rpx;
	}
	.signature-img{width:30rpx;height:30rpx;}
	.signature-txt{margin:0 10rpx;}
	.marright{margin-right:40rpx}
	.read{display:flex;align-items: flex-start;padding:20rpx;}
	.read-color{color: #EA5034;}
	.modal{
		
	}
	.modal-content{
		padding:30rpx 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.modal-box{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top:40rpx;
			&-img{
				width:200rpx;
				height:200rpx;
			}
		}
	}
	.modal-title{
		width: 100%;
		height:80rpx;
		background-color: #EA5034;
		color:white;
		text-align: center;
		line-height: 80rpx;
		border: 10rpx;
	}
	
	.modal-box:nth-child(2){
		width:510rpx;
	}
	.modal-input{
	}
	.modal-txt{
		color:#EA5034;
		// text-decoration: underline;  
		// text-decoration-color: red; 
		// text-decoration-style: solid;
		width: 110rpx;
		text-align:center;
	}
	.modal-footer{
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		align-items: center;
		height: 80rpx;
		border-top:2rpx solid #ccc;
	}
	.footer-btn{
		flex: 0 0 50%;
		display: flex;
		justify-content: center;
	}
	.footer-btn:nth-child(1){
		border-right: 1px solid #ccc;
	}
	.footer-btn:nth-child(2){
		color:#EA5034;
	}
	::v-deep .uicon-close.u-iconfont{color: white !important;}
	.sign-box{
	  padding:40rpx 30rpx;
	  display: flex;
	  .sign-box-left{
	    .txt{
	      margin-bottom: 20rpx;
	    }
	  }
	  .sign-box-right{
	    margin-left: 50rpx;
	    border:2rpx dashed #ccc;
	    width: 200rpx;
	    height: 200rpx;
	    background: #f5f5f5;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    .icon{
	      font-size:30rpx;
		  .img{
			  width:70rpx;
			  height:70rpx;
		  }
	    }
	    .text{margin-top:10rpx;}
	  }
	  .sign-box-img{
	    margin-left: 80rpx;
		.img{
			width:200rpx;
			height:200rpx;
		}
	  }
	}
	.modal-infos{
		display:flex;
		justify-content: space-between;
		align-items: center;
		padding:30rpx 60rpx 30rpx;
		&-left{
			
		}
		&-right{
			
		}
	}
	.modal-block{
		height: 80rpx;
		background:#f1f1f1;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
		display: flex;
		align-items: center;
		padding:0 30rpx;
		&-line{
			width:6rpx;
			height:30rpx;
			background-color:#EA5034;
		}
		&-txt{
			margin-left:20rpx;
		}
	}
	.steps{
		margin:40rpx;
	}
</style>
